<template>
	<div id="chakandindan">
		<h1 class="demo-form-inline" style="inline-heigth: 100px; text-align: center; margin: auto;">查看订单</h1>
		<!-- 表格 -->
		<el-table :data="celldasAry" style="width: 180%">
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
		  <el-table-column prop="purchaseOrderNumber" label="订单编号" width="180">
		  </el-table-column>
		  <el-table-column prop="purchaseOrderAmount" label="总金额" width="180">
		  </el-table-column>
		  <el-table-column prop="purchaseOrderNum" label="总数量" width="180">
		  </el-table-column>
		  <el-table-column prop="conveyTag" label="配送状态" width="180">
			  <template slot-scope="scope">
			  	<span v-if="scope.row.conveyTag=='P001-1'">待发货</span>
			  	<span v-if="scope.row.conveyTag=='P001-2'">待收货</span>
			  	<span v-if="scope.row.conveyTag=='P001-3'">已收货</span>
			  </template>
		  </el-table-column>
		
		  <!--操作列-->
		  <el-table-column label="操作">
			  <template slot-scope="scope">
				<el-button 
				size="small"
				round 
				type="primary"
					 @click="saveRecheckStorageCell(scope.$index,scope.row)">查看详情</el-button>
				<el-button v-if="scope.row.conveyTag=='P001-1'"
				size="small"
				round 
				type="primary"
				 @click="Fhuauda(scope.$index,scope.row)">发货</el-button>
			
			  </template>
			</el-table-column>
		 </el-table>
		<!---分页组件-->
			 <el-pagination  style="inline-heigth: 100px; text-align: center; margin: auto;"
			 @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="pageNo"
				  :page-sizes="pageSizeList"
				  :page-size="pageSize"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="total">
			 </el-pagination>
		
		<!-- 添加对话框 -->
		   <el-dialog title="查看详情" :visible.sync="makeFormVisible"  >
		     <el-table :data="dasAry" style="width: 300%">
				 <el-table-column prop="id" label="编号" width="100">
				 </el-table-column>
		        <el-table-column prop="purchaseOrderNumber" label="采购订单" width="150">
		        </el-table-column>
		        <el-table-column prop="productName" label="商品名称" width="100">	
		        </el-table-column>
				<el-table-column prop="count" label="采购数量" width="100">
				</el-table-column>
		        <el-table-column prop="productPrice" label="商品单价" width="100">	
		        </el-table-column>
		        <el-table-column prop="total" label="小计">			
				</el-table-column>
				<el-table-column prop="gatherTag" label="入库状态">
					<template slot-scope="scope">
						<span v-if="scope.row.gatherTag=='K001-1'">等待入库</span>
						<span v-if="scope.row.gatherTag=='K001-2'">入库失败</span>
						<span v-if="scope.row.gatherTag=='K001-2'">入库成功</span>
					</template>
				</el-table-column>
				 </el-table>
		    </el-dialog>
	</div>
</template>

<script>
	export default {
	      data() {
	        return {
	          celldasAry :[],
			  dasAry : [],
			  //回显商品对象
			  product :{},
			 // 当前页号
			 pageNo: 1,
			 // 当前页大小
			 pageSize: 5,
			 // 总记录数
			 total: 0,
			 // 页大小列表
			 pageSizeList: [2, 5, 10, 20],
			 //添加对话框的显示
			 makeFormVisible: false,
			 //添加表单的对象
			 makeForm: {},
			 orderApp:{}
	        }
	      },
		  methods:{
			// 页大小改变
					  handleSizeChange(val) {
						  this.pageSize = val
						  this.cell()
					  },
					  
					//页号改变
					handleCurrentChange(val) {
						this.pageNo = val
						// 重新查询
						this.cell()
					},
				  	//分页查询采购订单表
				  	async cell() {
				  		// 用es6的解构函数
						let id=sessionStorage.getItem("token")
				  		const {data: res} = await this.$http.post
				  		(`buy/purchaseOrder/page/${this.pageSize}/${this.pageNo}/${id}`)
				  		this.celldasAry = res.list
				  		this.total = res.total
				  	},
					//查看详情
					async saveRecheckStorageCell(index,row){
						//清空
						this.dasAry=[]
						//显示对话框
						this.makeFormVisible = true
						const {data: res} = await this.$http.post(`buy/purchaseOrderDetails/Purchaseid/${row.id}`)
						    this.dasAry=res
							console.log(res)
					},
					//点击发货
					async Fhuauda(index,row){
						// 用es6的解构函数
					 console.log(this.orderApp)
						localStorage.clear()
						const {data: res} = await this.$http.post(`buy/purchaseOrder/shipments/${row.id}`)
						this.cell()
						this.$message({
						          showClose: true,
						          message: '发货成功',
						          type: 'success'
						        });
					}
					
			  },
			  
			  created() {
			  	this.cell()
			  }
			}
	
</script>

<style>
</style>